<template>
    <!-- 添加 | 修改 | 查看弹窗 -->
    <el-dialog :title="`修改排序`" v-model="drawerVisible" width="700px" append-to-body center destroy-on-close draggable
        :close-on-click-modal='false'>
        <el-form ref="ruleFormRef" :model="drawerProps.rowData" :rules="rules" label-width="auto"
            :disabled="drawerProps.title == '查看'">

            <el-form-item label="显示顺序" prop="orderNum">
                <el-input-number v-model="drawerProps.rowData.orderNum" controls-position="right" :min="1" />
            </el-form-item>

        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" v-show="!drawerProps.isView" @click="handleSubmit">确 定</el-button>
                <el-button @click="drawerVisible = false">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template >
<script setup lang="ts" >
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import {
    CirclePlus,
    Delete,
    EditPen,
    Download,
    Upload,
    View,
    Refresh
} from "@element-plus/icons-vue";
import { validateChineseEnglish } from "@/utils/validate";
const proxy = getCurrentInstance()?.proxy;


//父组件传递参数类型
interface DiolgProps {
    title: string;
    isView: boolean;
    rowData: any;
    api?: (params: any) => Promise<any>;
    getTableList?: () => void;
    [proName: string]: any
}
// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const drawerVisible = ref(false);
const drawerProps = ref<DiolgProps>({
    isView: false,
    title: "",
    rowData: {
        shInstitutionTypes: []
    },
});

// 接收父组件传过来的参数
const acceptParams = (params: DiolgProps) => {
    if (!params.rowData.displayDay) params.rowData.displayDay = 1;
    if (params.rowData.displayStartTime && params.rowData.displayEndTime) {
        params.rowData.day = [params.rowData.displayStartTime, params.rowData.displayEndTime]
    }
    drawerProps.value = params;
    drawerVisible.value = true;
};

const handleSubmit = () => {
    ruleFormRef.value!.validate(async valid => {
        if (!valid) return;
        try {
            // console.log("drawerProps.value.rowData", drawerProps.value.rowData);
            // if (drawerProps.value.rowData.day.length > 0) {
            //     drawerProps.value.rowData.displayStartTime = drawerProps.value.rowData.day[0];
            //     drawerProps.value.rowData.displayEndTime = drawerProps.value.rowData.day[1];
            // }

            await drawerProps.value.api!(drawerProps.value.rowData);
            ElMessage.success({ message: `${drawerProps.value.title}成功！` });
            drawerProps.value.getTableList!();
            drawerVisible.value = false;
        } catch (error) {
            console.log(error);
        }
    });
};

const rules = reactive(
    {
        day: [
            { required: true, message: '日期范围不能为空', trigger: 'blur' }
        ],
        typeName: [
            { required: true, message: '类型不能为空', trigger: 'blur' },
            {
                validator: (rule, value, callback) => validateChineseEnglish(rule, value, callback, "请输入，限制18位，支持中英文"),
                trigger: "change"
            }
        ],
        status: [
            { required: true, message: '0正常1停用不能为空', trigger: 'blur' }
        ],
        content: [
            { required: true, message: '制度正文不能为空', trigger: 'blur' }
        ],
        delFlag: [
            { required: true, message: '是否删除0否1是不能为空', trigger: 'blur' }
        ],
        isHomeBanner: [
            { required: true, message: '是否置于首页banner位不能为空', trigger: 'blur' }
        ],
        bannerPic: [
            { required: true, message: '请上传首页banner图', trigger: 'blur' }
        ],
        displayDay: [
            { required: true, message: '天数不能为空', trigger: 'blur' }
        ]
    }
);
defineExpose({
    acceptParams
});
</script>
